<template>
  <div class="wrapper sysGroup">
    <div class="scrollY" :style="{'height':height+'px'}">
      <div class="weui-cells ">
        <div class="weui-cell" v-for="(item,index) in sysList" @click="showSystem(item)">
          <div class="position-relative item_left mr-2">
            <img src="~assets/image/bg001.png" width="46" height="46">
            <i class="iconfont icon-setting font24 position-absolute"></i>
          </div>
          <ul>
            <li>
              <label >系统名称：</label>
              <label>{{item.label}}</label>
            </li>
            <li class="txt_gray" style="margin-top: 2px;">
              <label>系统端口：</label>
              <label class="ml-1">{{item.value}}</label>
            </li>
          </ul>
          <div style="flex: 1 auto;text-align: right;">
            <i class="iconfont icon-delete d-inline-block txt_blue font20" @click.stop="deleteSystem(item)"></i>
          </div>
        </div>
      </div>
    </div>

    <div class="text-center footer w-100">
      <el-button class="ur-btn ur-btn-primary re_cell font16" style="height: 50px;width: 95%;" @click="toPage">绑定新系统</el-button>
    </div>
    <el-dialog custom-class="ur_dialog" title="系统详情" :visible.sync="dialogTableVisible" width="80%">
      <ul class="box-card">
        <li>
          <label class="w110 txt_gray" ><i class="iconfont icon-B66 font20 mr-1"></i>系统名称：</label>
          {{systemData.label}}</li>
        <li>
          <label class="w110 txt_gray" ><i class="iconfont icon-setting font20 mr-1"></i>系统端口：</label>
          {{systemData.value}}</li>
        <template v-if="tencentId==1">
          <li>
            <label class="w110 txt_gray"><i class="iconfont icon-user font20 mr-1"></i>用户名：</label>
            {{systemData.name}}</li>
          <li>
            <label class="w110 txt_gray"><i class="iconfont icon-mima font20 font-weight-bold mr-1"></i>密码：</label>
            {{systemData.pwd}}</li>
        </template>
       <!-- <template v-else-if="tencentId==2">
          <li>
            <label class="w110 txt_gray"><i class="iconfont icon-user font20 mr-1"></i>手机号：</label>
            {{systemData.phoneNo}}</li>
        </template>-->
      </ul>
    </el-dialog>

  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    components: {},
    props: {},
    data() {
      return {
        height:document.body.clientHeight-130,
        dialogTableVisible:false,
        systemData:{},
        tencentId:sessionStorage.getItem('tencentId')
      }
    },
    watch: {},
    computed: {
      ...mapState({
        sysList:state=>state.comm.sysList
      })
    },
    methods: {
      showSystem(item){
        this.systemData=item
        this.dialogTableVisible=true
      },
      deleteSystem(item){
      /*  this.$confirm('确认删除选中记录吗？', '提示', {type: 'warning'}).then(() => {
          this.$store.commit('comm/setSysList',{...item,isDelete:true})
        })*/
      let _this=this
        this.$weui.confirm('确认删除选中记录吗？', {
          title: '删除系统提示',
          buttons: [{
            label: '取消',
            type: 'default',
            onClick: function(){ console.log('no') }
          }, {
            label: '确定',
            type: 'primary',
            onClick: function(){
              _this.$store.commit('comm/setSysList',{...item,isDelete:true})
            }
          }]
        });
      },
      toPage(){
        this.$router.push('/static/register')
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
  .sysGroup{
    .weui-cell{padding:10px 16px !important;}
  }
  .item_left{
    i{top: 8px; left: 11px; color: #fff; font-weight: 900;}
  }
  .footer{
    position:fixed;bottom:15px;
  }
  .ur_dialog{
    .el-dialog__header{background:#0c8eec; }
    .el-dialog__title{color:#fff;}
    .el-dialog__headerbtn .el-dialog__close {
      font-size:20px !important;color:#fff;
    }
  }
</style>
